<template>
    <div id="box">
        <p class="hot">热搜榜</p>
        <div class="topFour" >
            <div v-for="hot in hots1" :key="hot.ranking" >
                <main>
                    <!-- <img src="../../assets/images/fangdajing.png" alt=""> -->
                        <img :src="hot.img" alt="">
                   
                </main> <span>{{hot.id}}</span>
                <p class="name">{{hot.name}}</p>
            </div>
        </div>
        <div class="btmSix" >
            <div v-for="hot in hots2" :key="hot.ranking">
                <span>{{hot.id}}</span>
                <p>{{hot.name}}···</p>
            </div>
        </div>
    </div> 
</template>

<script>
import axios from "axios";

export default {
  name: "HotSearch",
  created() {
    axios({
      url: "/hotsearchtop",
      method: "get"
    }).then(res => {
        this.hots=res.data;
        for(let i = 0;i<4;i++){
            this.hots1.push(this.hots[i])
        }
        console.log(this.hots1)
        for(let i = 4;i<10;i++){
            this.hots2.push(this.hots[i])
        }
    });
  },
  data() {
    return {
      hots:[],
      hots1:[],
      hots2:[]
    };
  }
};
</script>

<style scoped>
#box {
  font-size: 0.13rem;
}
#box .hot {
  text-indent: 0.22rem;
  line-height: 0.56rem;
  font-size: 0.16rem;
}
.topFour {
  height: 1.04rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.topFour .name{
  display: inline-block;
  height: 0.18rem;
  overflow-y: hidden;
  padding-left: 0.03rem
}
.topFour div {
  width: 0.74rem;
  height: 100%;
  margin: 0 0.05rem;
  box-sizing: border-box;
  border: 0.01rem solid #eaeaeb;
  border-radius: 0.05rem;
  box-shadow: 0.01rem 0.03rem 0.02rem 0.02rem #f2f3f4;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.topFour div main {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  overflow: hidden;
}
.topFour div main img {
  width: 100%;
  height: 100%;
}
.topFour div span {
  display: inline-block;
  width: 0.17rem;
  height: 0.17rem;
  border-radius: 50% 50% 50% 0;
  background: -webkit-linear-gradient(left, #fe5470, #fe479f);
  position: absolute;
  text-align: center;
  line-height: 0.17rem;
  left: 0.1rem;
  top: 0.48rem;
  color: #fff;
  font-size: 0.1rem;
}
#box .btmSix {
  width: 3.43rem;
  margin-left: 0.16rem;
  margin-top: 0.14rem;
}
.btmSix div {
  width: 1.71rem;
  height: 0.42rem;
  float: left;
}
.btmSix div span {
  margin-left: 0.1rem;
  display: inline-block;
  width: 0.23rem;
  height: 100%;
  line-height: 0.42rem;
  text-align: center;
  font-size: 0.12rem;
  color: #90a0be;
}
.btmSix div p {
  display: inline-block;
  height: 100%;
  line-height: 0.42rem;
  width: 1rem;
  overflow: hidden;
  text-align: center;
  font-size: 0.12rem;
  vertical-align : middle;
}
</style>
